import React, { useState } from 'react'
import { UdTable, IUdColumn, UdDateRangePicker, http } from '@/lib'
import { InputNumber } from 'antd'
import _ from 'lodash'
import apis from '@/apis/TodoList'
import moment from 'moment'

function TerminalTable(props: ITerminalTableProps) {
  const { dataSource, changeTableData } = props
  const [subTable, setSubTable] = useState({})
  const [loading, setLoading] = useState(false)

  const changeData = (row, key, value) => {
    const newData = [ ...dataSource ]
    const index = newData.findIndex(data => data.id == row.id)
    if (_.isArray(key)) {
      const items = {}
      key.map((s, i) => {
        items[s] = value[i]
      })
      row = { ...row, ...items }
    } else {
      row[key] = value
    }
    newData.splice(index, 1, row)
    changeTableData(newData)
  }
  
  const columns: IUdColumn[] = [
    { title: '物料分类名称', dataIndex: 'groupName' },
    { title: '当前动销/件', dataIndex: 'nowMove' },
    { title: '理论配额值/件', dataIndex: 'quotaCountNum' },
    { title: '申请配额/件', dataIndex: 'quotaNum', render: (text, record) => {
      return <InputNumber defaultValue={text} onBlur={(e) => changeData(record, 'quotaNum', e.target.value)} min={0} />
    } },
    { title: '配额有效期', dataIndex: 'quotaStartTime', align: 'center', render: (text, record) => {
      const endTime = record.quotaEndTime
      // const value = [text ? moment(text) as any : undefined, endTime ? moment(endTime) as any : undefined]
      // return <UdDateRangePicker defaultValue={value} onChange={(dates) => changeData(record, ['quotaStartTime', 'quotaEndTime'], dates)} valueFormat={['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']} />
      let render = text ? moment(text).format('YYYY-MM-DD') : ''
      render += endTime ? '~' + moment(endTime).format('YYYY-MM-DD') : ''
      return render
    } },
  ]

  const innerColumns: IUdColumn[] = [
    { title: '物料描述', dataIndex: 'matName' },
    { title: '物料号', dataIndex: 'prodBarcode' },
    { title: '期初实际库存/件', dataIndex: 'beginningRealStock' },
    { title: '当前期间到货/件', dataIndex: 'nowAog' },
    { title: '当前实物库存/件', dataIndex: 'nowRealStock' },
    { title: '当前未到货/件', dataIndex: 'onOrder' },
    { title: '当前动销/件', dataIndex: 'nowMove' },
    { title: '下月订单计划/件', dataIndex: 'nextMonthOrderNum' },
  ]

  const expandedRowRender = (record, index, indent, expanded) => {
    const data = subTable[record.id]
    return (
      <UdTable
        dataSource={data}
        columns={innerColumns}
        pagination={false}
        loading={loading}
      />
    )
  }

  const onExpand = (expanded, record) => {
    const key = record.id
    if (expanded && !subTable[key]) {
      const params = {productGroupId: record.productGroupId, ...props.paramsData}
      setLoading(true)
      http.get(apis.quotaApplicationMarketingList, {params}).then(res => {
        const data = res.data.checkStockDetailRespVos
        const newData = { ...subTable, [key]: data }
        setSubTable(newData)
      }).finally(() => {
        setLoading(false)
      })
    }
  }

  return (
    <UdTable
      dataSource={dataSource}
      columns={columns}
      pagination={false}
      expandedRowRender={expandedRowRender}
      onExpand={onExpand}
    />
  )
}

export default React.memo(TerminalTable)

interface ITerminalTableProps {
  dataSource: any[]
  paramsData: {brandCode: string, dealerCode: string}
  changeTableData: (data: any) => void
}
